<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form action="">
        <div>
            <label for="">登录名</label>
            <input type="text" id="login_name">


        </div>
        <div>
            <label >密码</label>
            <input type="password" id="login_pwd">

        </div>
        <div>
            <label >
                性别
            </label>
            <input type="radio" name="sex" id="boy" value="男" checked>男
            <input type="radio" name="sex" id="girl" value="女" checked>女




        </div>
        <div>
            <button id="reg_btn" value="" type="button"> 注册</button>
            <button type="reset">重置</button>
        </div>
    </form>
</div>
</body>
<script>
    function $(id) {
        return document.getElementById(id)
    }
    $("reg_btn").onclick=function () {
        let name = $("login_name").value;
        let pwd = $("login_pwd").value;
        let sex = "男";
        if ($("girl").checked){
            sex="女";
        }
        //构建json格式对象
        let  user = {"login_name":name,"login_pwd":pwd,"sex":sex};
        let str = JSON.stringify(user);
        //以登录名为key使用
        localStorage.setItem(name,str);
        location.href="msg.html"
    }

    function f() {

    }
</script>
</html>